<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		
	</head>
	<script type="text/javascript" src="../public/javascripts/jquery-3.0.0.js" ></script>
		<script type="text/javascript" src="../public/javascripts/bootstrap-wysiwyg.js"></script>
		<script type="text/javascript" src="../public/javascripts/bootstrap.min.js"></script>
		<script type="text/javascript" src="../public/javascripts/jquery.hotkeys.js" ></script>
		<link rel="stylesheet" href="../public/stylesheets/bootstrap-combined.min.css" />
		<link rel="stylesheet" href="../public/stylesheets/bootstrap.css" />
		<link rel="stylesheet" href="../public/stylesheets/bootstrap-combined.min.css" />
		<link rel="stylesheet" href="../public/stylesheets/font-awesome-ie7.css" />
		<link rel="stylesheet" href="../public/stylesheets/font-awesome.css" />
		
	<style>
		#editor {
			overflow: scroll;
			border: solid;
			max-height:300px;
			height: 300px;
			width: 400px;
		}
	</style>

	<body>
		<div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
			<div class="btn-group">
				<a class="btn dropdown-toggle" data-toggle="dropdown" title="Font">
					<i class="fa fa-font"></i> <b class="caret"></b></a>
				<ul class="dropdown-menu">
				</ul>
			</div>
			<div class="btn-group">
				<a class="btn dropdown-toggle" data-toggle="dropdown" title="Font Size">
					<i class="fa fa-text-height"></i> <b class="caret"></b></a>
				<ul class="dropdown-menu">
					<li>
						<a data-edit="fontSize 5">
							<font size="5">Huge</font>
						</a>
					</li>
					<li>
						<a data-edit="fontSize 3">
							<font size="3">Normal</font>
						</a>
					</li>
					<li>
						<a data-edit="fontSize 1">
							<font size="1">Small</font>
						</a>
						
					</li>
				</ul>
			</div>
			<div class="btn-group">
				<a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)">
					<i class="fa fa-bold"></i> </a>
				<a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)">
					<i class="fa fa-italic"></i> </a>
				</a>
				<a class="btn" data-edit="strikethrough" title="Strikethrough">
					<i class="fa fa-strikethrough"></i> </a>
				</a>
				<a class="btn" data-edit="underline" title="Underline (Ctrl/Cmd+U)">
					<i class="fa fa-underline"></i></a>
			</div>
			<div class="btn-group">
				<a class="btn" data-edit="insertunorderedlist" title="Bullet list">
					<i class="fa fa-list-ol"></i></a>
				</a>
				<a class="btn" data-edit="insertorderedlist" title="Number list">
					<i class="fa fa-list-ul"></i></a>
				<a class="btn" data-edit="outdent" title="Reduce indent (Shift+Tab)">
				<i class="fa fa-indent"></i></a>
				
			</div>
			<div class="btn-group">
				<a class="btn" data-edit="justifyleft" title="Align Left (Ctrl/Cmd+L)">
					<i class="fa fa-align-left"></i></a>
				<a class="btn" data-edit="justifycenter" title="Center (Ctrl/Cmd+E)">
						<i class="fa fa-align-center"></i></a>
				<a class="btn" data-edit="justifyright" title="Align Right (Ctrl/Cmd+R)">
						<i class="fa fa-align-right"></i></a>
				<a class="btn" data-edit="justifyfull" title="Justify (Ctrl/Cmd+J)">
						<i class="fa fa-align-justify"></i></a>
			</div>
			<div class="btn-group">
				<a class="btn dropdown-toggle" data-toggle="dropdown" title="Hyperlink">
						<i class="fa fa-link"></i></a>
				<div class="dropdown-menu input-append">
					<input class="span2" placeholder="URL" type="text" data-edit="createLink" />
					<button class="btn" type="button">Add</button>
				</div>
				<a class="btn" data-edit="unlink" title="Remove Hyperlink">
					<i class="fa fa-cut"></i></a>
			</div>

			<div class="btn-group">
				<a class="btn" title="Insert picture (or just drag & drop)" id="pictureBtn">
						<i class="fa fa-picture-o"></i></a>
				<input type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" />
			</div>
			<div class="btn-group">
				<a class="btn" data-edit="undo" title="Undo (Ctrl/Cmd+Z)">
						<i class="fa fa-undo"></i></a>
				<a class="btn" data-edit="redo" title="Redo (Ctrl/Cmd+Y)">
						<i class="fa fa-repeat"></i></a>
			</div>
			<input type="text" data-edit="inserttext" id="voiceBtn" x-webkit-speech="">
		</div>

		<div id="editor">
			输入内容…
		</div>
	</body>
	<script type="text/javascript">
		$(function(){
			 $('#editor').cleanHtml()
			function initToolbarBootstrapBindings() {
			var fonts = ['楷体','华文行楷','宋体','黑体','微软雅黑'],
				fontTarget = $('[title=Font]').siblings('.dropdown-menu');
			$.each(fonts, function(idx, fontName) {
				fontTarget.append($('<li><a data-edit="fontName ' + fontName + '" style="font-family:\'' + fontName + '\'">' + fontName + '</a></li>'));
			});
			$('a[title]').tooltip({
				container: 'body'
			});
			$('.dropdown-menu input').click(function() {
					return false;
				})
				.change(function() {
					$(this).parent('.dropdown-menu').siblings('.dropdown-toggle').dropdown('toggle');
				})
				.keydown('esc', function() {
					this.value = '';
					$(this).change();
				});

			$('[data-role=magic-overlay]').each(function() {
				var overlay = $(this),
					target = $(overlay.data('target'));
				overlay.css('opacity', 0).css('position', 'absolute').offset(target.offset()).width(target.outerWidth()).height(target.outerHeight());
			});
			if("onwebkitspeechchange" in document.createElement("input")) {
				var editorOffset = $('#editor').offset();
				$('#voiceBtn').css('position', 'absolute').offset({
					top: editorOffset.top,
					left: editorOffset.left + $('#editor').innerWidth() - 35
				});
			} else {
				$('#voiceBtn').hide();
			}
		};

		function showErrorAlert(reason, detail) {
			var msg = '';
			if(reason === 'unsupported-file-type') {
				msg = "Unsupported format " + detail;
			} else {
				console.log("error uploading file", reason, detail);
			}
			$('<div class="alert"> <button type="button" class="close" data-dismiss="alert">×</button>' +
				'<strong>File upload error</strong> ' + msg + ' </div>').prependTo('#alerts');
		};
		initToolbarBootstrapBindings();
		$('#editor').wysiwyg({
			fileUploadError: showErrorAlert
		});
		 $('#editor').keyup(function(event){ 
          
		 var e = window.event.keyCode;
 			if(e == 13 || e == 190 || e == 110){ 
           alert('11');
          } 
        }); 
		});
	</script>

</html>